<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Thymeleaf</title>
</head>

<body>
<center>
    <!--th:text 用于设置标签的文本值（如果值为标签，<p>String</p>）-->
    <h1 style="color:red" th:text="${str}"></h1>
    <h1 style="color:red" th:text="${base}"></h1>
    <h1 style="color:red" th:text="${tag}"></h1>

    <!--th:utext 用于设置标签的内容（如果值为标签，则直接显示标签效果，<p>String</p>  ——> String）-->
    <p th:utext="${tag}"></p>

    <!--th:each  遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置-->
    <!--
        说明:
            th:each="e,eState : ${emps}"
            其中e为循环的每一项，eState是下标属性(可省略)，eState属性包括：
                index：列表状态的序号，从0开始；
                count：列表状态的序号，从1开始；
                size：列表状态，列表数据条数；
                current：列表状态，当前数据对象
                even：列表状态，是否为奇数，boolean类型
                odd：列表状态，是否为偶数，boolean类型
                first：列表状态，是否为第一条，boolean类型
                last：列表状态，是否为最后一条，boolean类型
    -->
    <table border="1px" width="200px">
        <thead>
            <tr>
                <th>序号</th>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
            <tr th:each="emp, ind:${lists}">
                <td th:text="${ind.count}"></td>
                <td th:text="${emp.id}"></td>
                <td th:text="${emp.uname}"></td>
                <td th:text="${emp.age}"></td>
            </tr>
        </tbody>
    </table>

    <!--获取绑定的对象信息-->
    <ol>
        <li th:text="${emp.id}"></li>
        <li th:text="${emp.uname}"></li>
        <li th:text="${emp.age}"></li>
    </ol>

    <!--获取绑定的map集合数据-->
    <ul>
        <li th:text="${map.emp.id}"></li>
        <li th:text="${map.emp.uname}"></li>
        <li th:text="${map.emp.age}"></li>
    </ul>

    <!--获取绑定的数组数据-->
    <hr>
    <ol>
        <li th:each="arr:${array}" th:text="${arr}"></li>
    </ol>

    <!--th:if 条件判断，类似的有th:switch，th:case，优先级仅次于th:each,-->
    <!--如果条件满足，则显示数据，反之则不显示-->
    <h1 th:if="${emp.age gt 18}" th:text="${emp.uname}"></h1>
    <hr>
    <h1 th:if="${emp.age lt 18}" th:text="${emp.age}"></h1>
    <hr>

</center>

</body>
</html>